<template>
  <div class="module-header">
    <div class="header-content">
      <div class="header-icon"></div>
      <div class="header-text">
        <div class="text-[18px] text-[#00000] font-['Source Han Sans CN']">{{ title }}</div>
      </div>
    </div>
    <div class="header-divider"></div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  title: string
}

defineProps<Props>()
</script>

<style scoped>
.module-header {
  @apply px-6 py-4 bg-gray-50;
}

.header-content {
  @apply flex items-center mb-3;
}

.header-icon {
  width: 6px;
  height: 19px;
  opacity: 1;
  border-radius: 4px;
  background-color: #2468F2;
  border: 1px solid #D4D8E5;
  margin-right: 12px;
  flex-shrink: 0;
}

.header-text {
  @apply flex-1;
}

.header-text h2 {
  @apply mb-1;
}

.header-divider {
  height: 1px;
  background-color: #D4D8E5;
  width: 100%;
}
</style>
